import React, { useState } from 'react'
import { Card, Form, Input, Button, message, Select } from 'antd'
import { LockOutlined, UserOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

const { Option } = Select

// 模拟用户角色选项
const roleOptions = [
  { value: 'farmer', label: '农户' },
  { value: 'village_admin', label: '村干部' },
  { value: 'government', label: '政府人员' },
  { value: 'enterprise', label: '企业代表' }
]

// 模拟村庄选项
const villageOptions = [
  { value: '幸福村', label: '幸福村' },
  { value: '和平村', label: '和平村' },
  { value: '富裕村', label: '富裕村' },
  { value: '和谐村', label: '和谐村' },
  { value: '全县', label: '全县' }
]

const Register: React.FC = () => {
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()
  const [form] = Form.useForm()

  const handleRegister = async (values: {
    username: string;
    password: string;
    confirmPassword: string;
    email: string;
    phone: string;
    role: string;
    village: string;
  }) => {
    setLoading(true)
    try {
      // 验证密码一致性
      if (values.password !== values.confirmPassword) {
        message.error('两次输入的密码不一致')
        return
      }
      
      // 模拟注册请求
      // 这里我们直接将用户信息存入localStorage作为模拟
      const userData = {
        id: Date.now().toString(),
        username: values.username,
        password: values.password,
        email: values.email,
        phone: values.phone,
        role: values.role,
        village: values.village,
        createTime: new Date().toISOString()
      }
      
      // 获取现有的用户数据
      const existingUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]')
      // 添加新用户
      existingUsers.push(userData)
      // 保存回localStorage
      localStorage.setItem('registeredUsers', JSON.stringify(existingUsers))
      
      message.success('注册成功，请登录')
      navigate('/login')
    } catch (error) {
      message.error('注册失败，请重试')
    } finally {
      setLoading(false)
    }
  }

  const handleBackToLogin = () => {
    navigate('/login')
  }

  return (
    <div style={{
      minHeight: '100vh',
      backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '20px'
    }}>
      <Card 
        title="乡村产业发展平台注册" 
        style={{ 
          width: 500, 
          borderRadius: 12,
          boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
          background: 'rgba(255,255,255,0.95)'
        }}
      >
        <Form
          form={form}
          name="register"
          layout="vertical"
          onFinish={handleRegister}
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名' },
              { min: 4, message: '用户名长度至少为4位' }
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入用户名"
              size="large"
            />
          </Form.Item>
          
          <Form.Item
            name="password"
            label="密码"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码长度至少为6位' }
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="请输入密码"
              size="large"
            />
          </Form.Item>
          
          <Form.Item
            name="confirmPassword"
            label="确认密码"
            rules={[
              { required: true, message: '请确认密码' }
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="请再次输入密码"
              size="large"
            />
          </Form.Item>
          
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input
              prefix={<MailOutlined className="site-form-item-icon" />}
              placeholder="请输入邮箱"
              size="large"
            />
          </Form.Item>
          
          <Form.Item
            name="phone"
            label="手机号码"
            rules={[
              { required: true, message: '请输入手机号码' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
            ]}
          >
            <Input
              prefix={<PhoneOutlined className="site-form-item-icon" />}
              placeholder="请输入手机号码"
              size="large"
            />
          </Form.Item>
          
          <div className="ant-row ant-form-item-row">
            <div className="ant-col ant-form-item-label">
              <label className="ant-form-item-required" title="角色">角色</label>
            </div>
            <div className="ant-col ant-form-item-control">
              <Form.Item
                name="role"
                noStyle
                rules={[{ required: true, message: '请选择角色' }]}
              >
                <Select placeholder="请选择角色" style={{ width: '100%' }} size="large">
                  {roleOptions.map(option => (
                    <Option key={option.value} value={option.value}>{option.label}</Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
          </div>
          
          <div className="ant-row ant-form-item-row">
            <div className="ant-col ant-form-item-label">
              <label className="ant-form-item-required" title="所属村庄">所属村庄</label>
            </div>
            <div className="ant-col ant-form-item-control">
              <Form.Item
                name="village"
                noStyle
                rules={[{ required: true, message: '请选择所属村庄' }]}
              >
                <Select placeholder="请选择所属村庄" style={{ width: '100%' }} size="large">
                  {villageOptions.map(option => (
                    <Option key={option.value} value={option.value}>{option.label}</Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
          </div>
          
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: '100%' }}
              size="large"
              loading={loading}
            >
              注册
            </Button>
          </Form.Item>
          
          <div style={{ textAlign: 'center', marginTop: 16 }}>
            <Button type="link" onClick={handleBackToLogin}>
              已有账号？返回登录
            </Button>
          </div>
        </Form>
      </Card>
    </div>
  )
}

export default Register